<template>
  <div class="container">
    <div class="topCla">
      <div class="topLeftCla">
        <div id="jiTotalityId" class="jizongshuCla" />
      </div>
      <div class="topRightCla">
        <div id="jicunlanliangId" class="jicunlanliangCla" />
      </div>
    </div>
    <div class="centerCla">
      <div class="centerLeftCla">
        <div class="centerLeftLeftCLa">
          <div class="titleCla">昨日产蛋量</div>
          <div class="textCla">1000(枚)</div>
        </div>
        <div class="centerLeftcenterCLa">
          <div v-if="true">
            <i class="el-icon-top" />
          </div>
          <div class="bizuori">
            <div>同比昨日增长</div>
            <div>50%</div>
          </div>
          <div v-if="false">
            <i class="el-icon-bottom" />
          </div>
        </div>
        <div class="centerRightRightCLa">
          <div class="titleCla">今日产蛋量</div>
          <div class="textCla">1000(枚)</div>
        </div>
      </div>
      <div class="centerLeftCla">
        <div class="centerLeftLeftCLa">
          <div class="titleCla">昨日产蛋(kg)</div>
          <div class="textCla">1000(kg)</div>
        </div>
        <div class="centerLeftcenterCLa">
          <div v-if="false">
            <i class="el-icon-top" />
          </div>
          <div class="bizuori">
            <div>同比昨日下降</div>
            <div>50%</div>
          </div>
          <div v-if="true">
            <i class="el-icon-bottom" />
          </div>
        </div>
        <div class="centerRightRightCLa">
          <div class="titleCla">今日产蛋(kg)</div>
          <div class="textCla">1000(kg)</div>
        </div>
      </div>
    </div>
    <div class="footerCla">
      <div class="footer-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>鸡舍数</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
          </div>
          <div class="text item">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="date" label="日期" width="80" align="center" />
              <el-table-column prop="name" label="鸡舍" width="100" align="center" />
              <el-table-column prop="content" label="内容" align="center" />
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="footer-right">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用药</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
          </div>
          <div class="text item">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="date" label="日期" width="80" align="center" />
              <el-table-column prop="name" label="鸡舍" width="100" align="center" />
              <el-table-column prop="content" label="内容" align="center" />
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'DataCharts',
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.totalitybingzhuangtu()
    this.jicunlanlianghuanxingtu()
  },
  methods: {
    // 鸡的总数饼状环形图
    totalitybingzhuangtu() {
      var chartDom = document.getElementById('jiTotalityId')
      var WorkPie = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '蛋鸡舍数' },
              { value: 735, name: '雏鸡舍数' }
            ]
          }
        ],
        graphic: [
          {
            type: 'text', // 通过不同top值可以设置上下显示
            left: 'center',
            top: '45%',
            style: {
              text: '100',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 40,
              color: '#4d4f5c',
              fontFamily: 'Microsoft YaHei'
            }
          },
          {
            type: 'text', // 通过不同top值可以设置上下显示
            left: 'center',
            top: '55%',
            style: {
              text: '鸡舍数',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 30,
              color: '#4d4f5c'
            }
          }
        ]
      }

      option && WorkPie.setOption(option)
      window.addEventListener('resize', () => {
        if (WorkPie) WorkPie.resize()
      })
    },
    // 鸡的存栏量饼状环形图
    jicunlanlianghuanxingtu() {
      var chartDom = document.getElementById('jicunlanliangId')
      var WorkPie = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '蛋鸡存栏量' },
              { value: 735, name: '雏鸡存栏量' }
            ]
          }
        ],
        graphic: [
          {
            type: 'text', // 通过不同top值可以设置上下显示
            left: 'center',
            top: '45%',
            style: {
              text: '100',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 40,
              color: '#4d4f5c',
              fontFamily: 'Microsoft YaHei'
            }
          },
          {
            type: 'text', // 通过不同top值可以设置上下显示
            left: 'center',
            top: '55%',
            style: {
              text: '鸡总存栏量',
              textAlign: 'center',
              fill: '#000',
              width: 30,
              height: 30,
              fontSize: 30,
              color: '#4d4f5c'
            }
          }
        ]
      }

      option && WorkPie.setOption(option)
      window.addEventListener('resize', () => {
        if (WorkPie) WorkPie.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  padding: 10px 10px;
  background-color: #f1f1f1;

  .topCla {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .topLeftCla {
      width: 49%;
      height: 100%;
      padding: 20px;
      background-color: #fff;

      .jizongshuCla {
        width: 100%;
        height: 100%;
      }
    }

    .topRightCla {
      width: 49%;
      height: 100%;
      padding: 20px;
      background-color: #fff;

      .jicunlanliangCla {
        width: 100%;
        height: 100%;
      }
    }
  }

  .centerCla {
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: space-between;

    .centerLeftCla {
      width: 49%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;

      .titleCla {
        /* font-size: 35px; */
        display: flex;
        justify-content: center;
        font-weight: 800;
        margin-bottom: 20px;
      }

      .textCla {
        height: calc(100% - 40px);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        font-weight: 400;
      }

      .bizuori {
        font-size: 30px;
        font-weight: 400;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .centerLeftLeftCLa {
        width: 35%;
        height: 100%;
        border-right: 1px solid #606266;
        padding: 20px;
      }

      .centerLeftcenterCLa {
        width: 30%;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 45px;
      }

      .centerRightRightCLa {
        width: 35%;
        height: 100%;
        border-left: 1px solid #606266;
        padding: 20px;
      }
    }

    .centerRightCla {
      width: 49%;
      height: 100%;
      background-color: blue;
    }
  }

  .footerCla {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .footer-left,
    .footer-right {
      width: 49%;
    }

    ::v-deep.footer-left .el-card__header {
      background-color: #fdd2d2;
    }

    ::v-deep.footer-right .el-card__header {
      background-color: #ffe6be;
    }

    ::v-deep.el-card__header {
      font-size: 14px;
      font-weight: 700;
      color: black;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }

    .box-card {
      height: 500px;
    }
  }
}
</style>
